<template>
    <div class="exportDialog">
        <el-dialog
        title="导入文件"
        :visible.sync="popUpObj.state"
        width="30%"
        center>
        <div>
            <el-upload
                class="upload-demo"
                action=""
                :on-change="handleChange"
                :on-remove="handleRemove"
                :limit="1"
                :auto-upload="false"
                :file-list="fileList">
                <el-button size="small" type="primary" :disabled="fileList.length>0">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传json文件</div>
            </el-upload>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelMethod">取 消</el-button>
            <el-button type="primary" @click="tranDataByJson">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import buildData from "@/zstp/command/buildData";
export default {
    props:{
        popUpObj:{
            type: Object,
            default: () => {}
        }
    },
    data(){
        return{
            fileList:[],
            jsonData:{},
        }
    },
    mounted(){

    },
    methods:{
        handleChange(file, fileList){
            this.fileList=fileList
            var that = this;
            let contentHtml=""
            let reader = new FileReader();//读取文件内容
            reader.readAsText(file.raw,'utf-8'); //防止中文乱码问题，不加reader.onload方法都不会触发
            reader.onload = function (e) {
                contentHtml = e.target.result //txt文本内容，接下来就可以对其进行校验处理了
                that.jsonData=JSON.parse(contentHtml)
            }

        },
        handleRemove(file, fileList){
            this.fileList=fileList
        },
        tranDataByJson(){
          this.jsonData=buildData.neo4jDataToAntV(this.jsonData)
            this.$emit("getUploadJson",this.jsonData)
            this.cancelMethod()
        },
        cancelMethod(){
            this.fileList=[]
            this.popUpObj.state = false
        }
    }
    }
</script>

<style scoped>
    .exportDialog{
        width: 300px;
        height: 150px;
    }
</style>
